<template>
	<div
		:class="['app-editor-container', 'app-input-ip', `app-input-ip-${name}`]"
	>
		<a-input-group>
			<a-row :gutter="8">
				<a-col :span="6" class="input-ip__col">
					<FormItemRest>
						<a-input
							class="input-ip__input"
							v-model:value="ipData[0]"
							@change="onChange"
							:disabled="disabled"
							:readOnly="readOnly"
						/>.
					</FormItemRest>
				</a-col>
				<a-col :span="6" class="input-ip__col">
					<FormItemRest>
						<a-input
							class="input-ip__input"
							v-model:value="ipData[1]"
							@change="onChange"
							:disabled="disabled"
							:readOnly="readOnly"
						/>.
					</FormItemRest>
				</a-col>
				<a-col :span="6" class="input-ip__col">
					<FormItemRest>
						<a-input
							class="input-ip__input"
							v-model:value="ipData[2]"
							@change="onChange"
							:disabled="disabled"
							:readOnly="readOnly"
						/>.
					</FormItemRest>
				</a-col>
				<a-col :span="6" class="input-ip__col">
					<FormItemRest>
						<a-input
							class="input-ip__input"
							v-model:value="ipData[3]"
							@change="onChange"
							:disabled="disabled"
							:readOnly="readOnly"
						/>
					</FormItemRest>
				</a-col>
			</a-row>
		</a-input-group>
	</div>
</template>

<script setup lang="ts">
import { IEvent } from '@/core';
import { FormItemRest } from 'ant-design-vue';
import { onBeforeMount, ref, Ref } from 'vue';
import { inputIpProps } from './input-ip';

interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}

const props = defineProps(inputIpProps);
const emit = defineEmits<EditorEmit>();
const ipData: Ref<any> = ref([]);
const onChange = () => {
	if (ipData.value.length == 4) {
		emit('component-action', {
			name: `${props.name}`,
			action: 'valueChange',
			data: ipData.value.join('.'),
		});
	}
};

onBeforeMount(() => {
	if (props.value) {
		ipData.value = props.value.split('.');
	}
});
</script>
